<template>
  <div class='header'>
    
    <span>个人中心</span>
    
  </div>
  <div class="user">
    <div class="info" style="width: 100%; max-width: 100%;"> <!-- 设置宽度和最大宽度为1000px -->
      <el-card class="box-card" style="width: 100%; height: auto;"> <!-- 设置卡片宽度为100%，高度自动 -->
        <el-row>
          <el-col :span="8">
            <img alt="" class="img" src="../assets/logo.svg">
          </el-col>

          <el-col :span="8">
  <el-descriptions column="1" :model="form">
    <el-descriptions-item label="姓名" >{{ form.name }}</el-descriptions-item>
    <el-descriptions-item label="电话" >{{ form.phone }}</el-descriptions-item>
  </el-descriptions>
</el-col>
<el-col :span="8">
            <el-icon size="20px" style="margin:0 20px;">
              <router-link to="/updateuser">
                <Tools/>
              </router-link>
            </el-icon>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>


  <div class="other">
    <div class="item">
      <el-icon size="20px" style="margin:0 20px;">
        <Avatar/>
      </el-icon>
      <router-link to="/mytrip">我的行程</router-link>
    </div>
    <div class="item">
      <el-icon size="20px" style="margin:0 20px;">
        <Clock/>
      </el-icon>
      <router-link to="/historytrip">历史行程</router-link>
    </div>
    <div class="item">
      <el-icon size="20px" style="margin:0 20px;">
        <Comment/>
      </el-icon>
      <span>消息中心 </span>
    </div>
    <div class="item" style="display: flex; justify-content: flex-end;">
  <el-button type="danger" @click="Logoutoflogin">退出登录</el-button>
</div>
    
  </div>
</template>
<script setup>
import { ref } from 'vue'

import request from "@/utils/request";
import { useRouter } from 'vue-router';

// form表单
const form = ref({
  name: "",
  phone: ""

})
const add =()=>{
  form.value=userInfo.value
}

const userInfo = ref({});
const parseUserInfo = () => {
  const originalString = localStorage.getItem("user")
  var newStr = originalString.substring(30, originalString.length - 1); // 从索引12开始，截取到字符串末尾的前一个字符，即去掉 "]"
  // 去掉字符串两侧的空格，并替换其中的等号和单引号为对应的JSON字符
  var newStr = newStr.replace(/=/g, ':').replace(/'/g, '"');
  // 在字符串开头和结尾添加大括号，使其成为一个完整的JSON对象
  let pairs = newStr.split(", ");
  let jsonObj = {};
  for (let i = 0; i < pairs.length; i++) {
    let keyValuePair = pairs[i].split(":");
    jsonObj[keyValuePair[0]] = keyValuePair[1];
  }
  let jsonStr = JSON.stringify(jsonObj);
  userInfo.value = JSON.parse(jsonStr);
  console.log(userInfo.value);
}

const Logoutoflogin =()=>{
  localStorage.clear();
  location.reload();
  alert("退出登录成功"); // 显示消息弹框
}


parseUserInfo();
add()

</script>
<style lang='less' scoped>
.header {
  text-align: center;
  background-color: #BDDCFF;
  height: 60px;
  line-height: 60px;
  color: #495e77;

}

.user {
  margin: 10px 20px;
  display: flex;
  border: 2px solid #ccc;
  border-radius: 6px;

  .img {
    width: 90px;
    margin: 5px;
    margin-right: 30px;
  }

  .info {
    line-height: 20px;

    
  }

  
}

.other {
  margin: 10px 20px;
  border: 2px solid #ccc;
  border-radius: 6px;

  .item {
    line-height: 80px;
    border-bottom: 1px solid #D4D4D4;

    .el-icon {
      vertical-align: middle;

    }
  }
}
</style>
